import * as React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';
import api from '../../../api/api';
import { ComponentsFactoryContext } from '../../../app/ComponentsFactoryContext';
import { QCX } from '../../../lib/QCX';
import { INewsItem } from '../../../model/INewsList';
import { IStoreState } from '../../../model/IStoreState';
import { VideoModalPlayerType } from '../../../model/IVideoModal';

const styles = require('./NewsItemCover.scss');
const qcx = QCX.bindCX(styles, 'news-item-cover');

export interface NewsItemCoverOwnProps {
    newsItemId: string;
    withHeightLimitation?: boolean;
    isInDetailed?: boolean;
}

interface StateToProps {
    newsItem: INewsItem;
}

interface NewsItemCoverProps extends NewsItemCoverOwnProps, StateToProps {}

const ImageWrapThemed = styled.div`
    border-radius: ${(props) => props.theme.borderRadiusS};
    overflow: hidden;
`;
const NewsItemCoverVideoThemed = styled.div`
    border-radius: ${(props) => props.theme.borderRadiusS};
    overflow: hidden;
    margin-top: 5px;
`;

export const NewsItemCover = connect((state: IStoreState, ownProps: NewsItemCoverOwnProps) => {
    return {
        newsItem: state.newsList.items[ownProps.newsItemId] || {},
    };
})((props: NewsItemCoverProps) => {
    const newsItem = props.newsItem as INewsItem;
    switch (newsItem.cover?.type) {
        case 'IMAGE':
            return (
                <ImageWrapThemed
                    className={qcx('_image-wrap', {
                        '_pinned': newsItem.isPinned,
                        '_image-wrap_is-in-detailed': props.isInDetailed,
                        '_undefined-from-admin': !newsItem.cover?.image,
                    })}
                >
                    <img
                        src={api.shortUrl.segment(newsItem.cover?.image).toString()}
                        className={qcx('', {
                            '_image': true,
                            '_with-height-limitation': props.withHeightLimitation,
                        })}
                        alt={'news poster'}
                    />
                </ImageWrapThemed>
            );
        case 'VIDEO':
            const videoCoverData =
                newsItem.cover?.type == 'VIDEO'
                    ? {
                        id: newsItem.cover.video.id,
                        link: newsItem.cover.video.link || '',
                        type: newsItem.cover.video.type,
                    }
                    : {};
            if (videoCoverData.id && newsItem.cover?.video?.type !== 'YOUTUBE') {
                videoCoverData['thumbnail'] = newsItem.cover?.video?.thumbnail;
                videoCoverData['type'] = VideoModalPlayerType.DEFAULT;
            }
            return (
                <NewsItemCoverVideoThemed
                    className={qcx('', {
                        '_video': true,
                        '_with-height-limitation': props.withHeightLimitation,
                        '_pinned': newsItem.isPinned,
                        '_is-in-detailed': props.isInDetailed,
                    })}
                    key={Number(newsItem.id)}
                >
                    <ComponentsFactoryContext.Factory.NewsVideoPoster
                        lessonId={String(newsItem.id)}
                        lessonTheoryVideoData={videoCoverData}
                    />
                </NewsItemCoverVideoThemed>
            );
        default:
            return null;
    }
});
